<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
        
        <script type="text/javascript">
        
            var columnChartData = [{name:"John",points:35654, color:"#7F8DA9", bullet:"images/0.gif"},
                            {name:"Damon",points:65456, color:"#FEC514", bullet:"images/1.gif"},
                            {name:"Patrick",points:45724, color:"#DB4C3C", bullet:"images/2.gif"},
                            {name:"Mark",points:13654, color:"#DAF0FD", bullet:"images/3.gif"}];
            
            
            var lineChartData = [{date:new Date(2009,10,2),value:5},
                            {date:new Date(2009,10,3),value:15},
                            {date:new Date(2009,10,4),value:13},
                            {date:new Date(2009,10,5),value:17},
                            {date:new Date(2009,10,6),value:15},
                            {date:new Date(2009,10,9),value:19},
                            {date:new Date(2009,10,10),value:21},
                            {date:new Date(2009,10,11),value:20},
                            {date:new Date(2009,10,12),value:20},
                            {date:new Date(2009,10,13),value:19},
                            {date:new Date(2009,10,16),value:25},
                            {date:new Date(2009,10,17),value:24},
                            {date:new Date(2009,10,18),value:26},
                            {date:new Date(2009,10,19),value:27},
                            {date:new Date(2009,10,20),value:25},
                            {date:new Date(2009,10,23),value:29},
                            {date:new Date(2009,10,24),value:28},
                            {date:new Date(2009,10,25),value:30},
                            {date:new Date(2009,10,26),value:72, customBullet:"images/redstar.png"},
                            {date:new Date(2009,10,27),value:43},
                            {date:new Date(2009,10,30),value:31},
                            {date:new Date(2009,11,1),value:30},
                            {date:new Date(2009,11,2),value:29},
                            {date:new Date(2009,11,3),value:27},
                            {date:new Date(2009,11,4),value:26}];
            
            window.onload = function() 
            {
                // CHART1
                var chart1 = new AmCharts.AmSerialChart();
                chart1.dataProvider = columnChartData;
                chart1.categoryField = "name";
                chart1.marginRight = 0;
                chart1.marginLeft = 0;
                chart1.marginBottom = 0;
                chart1.marginTop = 0;
                chart1.startDuration = 1;
                
                var valueAxis1 = new AmCharts.ValueAxis();
                valueAxis1.minimum = 0;
                valueAxis1.axisAlpha = 0;
                valueAxis1.maximum = 80000;
                valueAxis1.dashLength = 4;
                chart1.addValueAxis(valueAxis1);
                
                var catAxis = chart1.categoryAxis;
                catAxis.inside = true;
                catAxis.gridAlpha = 0;
                catAxis.tickLength = 0;
                
                var graph1 = new AmCharts.AmGraph();
                graph1.valueField = "points";
                graph1.customBulletField = "bullet";
                graph1.bulletOffset = 16;
                graph1.colorField = "color";
                graph1.bulletSize = 34;
                graph1.type = "column";
                graph1.fillAlphas = 0.8;
                graph1.cornerRadiusTop = 8;
                graph1.lineAlpha = 0;
                chart1.addGraph(graph1);
                
                chart1.write("container1");
                
                
                // CHART 2
                var chart2 = new AmCharts.AmSerialChart();
                chart2.dataProvider = lineChartData;
                chart2.pathToImages = "../../amcharts/javascript/images/";
                chart2.categoryField = "date";
                chart2.marginRight = 0;
                chart2.marginLeft = 0;
                chart2.marginBottom = 0;
                chart2.marginTop = 0;
                
                var catAxis = chart2.categoryAxis;
                catAxis.parseDates = true;
                catAxis.inside = true;
                catAxis.gridAlpha = 0;
                catAxis.tickLength = 0;
                
                var valueAxis2 = new AmCharts.ValueAxis();
                valueAxis2.dashLength = 4;
                valueAxis2.axisAlpha = 0;
                chart2.addValueAxis(valueAxis2);
                
                var graph2 = new AmCharts.AmGraph();
                graph2.valueField = "value";
                graph2.type = "line";
                graph2.lineColor = "#D8E63C";
                graph2.customBullet = "images/star.gif";
                graph2.bulletSize = 14;
                graph2.customBulletField = "customBullet";
                chart2.addGraph(graph2);
                
                var chartCursor = new AmCharts.ChartCursor();
                chart2.addChartCursor(chartCursor);
                
                chart2.write("container2");
            }

        
        </script>
    
    </head>
    
    <body>
        <div id="container1" style="width: 50%; float:left; height: 400px;"></div>
        <div id="container2" style="width: 50%; float:left; height: 400px;"></div>
    </body>
</html>